<template>
    <div class="flex flex-1 flex-col px-[100px] mt-8">
        <div class="flex h-[200px] justify-between">
            <div class="flex">
                <el-image style="width: 200px; height: 200px" :src="goodsDetail.goodsImg" fit="cover" />
                <div class="flex flex-col justify-between ml-4">
                    <div class="mb-4">{{ goodsDetail.goodsName }}</div>
                    <div class="mb-4">￥{{ goodsDetail.goodsPrice }}/{{ goodsDetail.goodsSpec }}</div>
                    <el-input-number class="mb-4" v-model="goodsNum" :min="1" :max="100" @change="handleChange" />
                    <el-button-group class="">
                        <el-button type="primary" :icon="ShoppingTrolley" @click="addToCart">加入购物车</el-button>
                        <el-button type="primary" @click="addToOrder"> 下单 </el-button>
                    </el-button-group>
                </div>
            </div>
            <div>
                <el-image @click.native="gotoRecord" style="width: 100px; height: 100px" :src="qrcodeUrl" fit="contain" />
            </div>
        </div>
        <div class="flex flex-col mt-8">
            <div>团购活动</div>
            <div class="flex flex-col mt-4">
                <div v-for="item in ruleList" class="flex flex-col p-4 mb-4 bg-gray-200 shadow-md">
                    <div class="flex items-center">
                        <div class="flex flex-1">
                            <div>{{ item.ruleName }}</div>
                            <div class="ml-4">活动时间：{{ item.startTime }}-{{ item.endTime }}</div>
                        </div>
                        <div>
                            <div v-if="item.status === 1">活动即将开始</div>
                            <el-button v-else-if="item.status === 2" type="primary"
                                @click="join(item.id)">报名</el-button>
                            <div v-else>活动已结束</div>

                        </div>
                    </div>
                    <div class="flex flex-col">
                        <div class="flex">
                            <div class="flex flex-col p-2 mr-2 bg-white shadow-sm"
                                :class="{ 'bg-orange-500': item.signNum >= itm.peopleNum }"
                                v-for="itm in item.detailList">
                                <span>团购人数：{{
                                    itm.peopleNum }}
                                </span><span>团购价格：{{ item.goodsPrice * itm.discount / 10 }}</span>
                            </div>
                        </div>

                        <div>已报名：{{ item.signNum }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-col flex-1 mt-8">
            <div>商品评价</div>
            <div class="flex flex-col p-4 mt-4 bg-gray-200 shadow-md">
                <div v-for="item in commentList" class="p-2 mb-4 bg-gray-100">
                    <el-image style="width: 100px; height: 100px" :src="item.commentImg" fit="cover" />
                    <div>{{ item.commentContent }}</div>
                    <div>{{ item.commentTime }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ShoppingTrolley } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getGoods, getComments } from '@/apis/goods'
import { addCart } from '@/apis/cart'
import { addOrder, addRuleOrder, registerRule } from '@/apis/order'
import { getGroupRuleList } from '@/apis/group'
import { ElMessage } from 'element-plus'
import QRCode from 'qrcode'
const route = useRoute()
const router = useRouter()
const goodsId = ref()
const goodsDetail = reactive({
    goodsImg: '',
    goodsName: '',
    goodsPrice: '',
    goodsSpec: '',
    storeId: null
})
const qrcodeUrl = ref('')
const goodsNum = ref(1)
const handleChange = () => { }
const getDetail = async () => {
    const res = await getGoods(goodsId.value)
    console.log(res)
    Object.assign(goodsDetail, res)
}
const addToCart = async () => {
    await addCart({
        goodsId: goodsId.value,
        goodsNum: goodsNum.value
    })
}
const addToOrder = async () => {
    await addOrder({
        storeId: goodsDetail.storeId,
        goodsList: [
            {
                goodsId: goodsId.value,
                goodsNum: goodsNum.value
            }
        ]
    })
}
const commentList = ref([])
const getAllComment = async () => {
    const res = await getComments({
        pageSize: 1000,
        pageNum: 1,
        goodsId: goodsId.value
    })
    commentList.value = res.list
}
const ruleList = ref([])
const getRules = async () => {
    const res = await getGroupRuleList({
        pageNum: 1,
        pageSize: 1000,
        goodsId: goodsId.value
    })
    ruleList.value = res.list
}
const gotoRecord = () => {
    router.push({
        name: 'GoodsRecord',
        query: {
            id: goodsId.value
        }
    })
}
const join = async (id) => {
    await registerRule(id)
    ElMessage.success("报名成功")
    getRules()
}
const generateCode = async () => {
    qrcodeUrl.value = await QRCode.toDataURL('http://localhost:5173/goods/record?id=' + goodsId.value)
}
onMounted(() => {
    const { id } = route.query
    goodsId.value = id
    getDetail()
    getAllComment()
    getRules()
    generateCode()
})
</script>

<style scoped></style>
